<template>
    <div id="app">
      <div v-show="show_side_flag" :style="show_side" class="left">
            <ul class="left-ul">
                <li>
                    <el-tooltip class="item" effect="dark" content="主页" @click.native="()=>{$router.push('/home')}"
                                placement="right">
                        <leftbtn v-bind:button_val="HomeBtnValue"></leftbtn>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="公开游戏" placement="right">
                        <leftbtn v-bind:button_val="GameBtnValue"></leftbtn>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="我的制作" placement="right">
                        <leftbtn v-bind:button_val="PrivateBtnValue"></leftbtn>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="玩家社区" placement="right">
                        <leftbtn v-bind:button_val="CommunityBtnValue"></leftbtn>
                    </el-tooltip>
                </li>
                <li>
                    <el-tooltip class="item" effect="dark" content="关于我们" placement="right">
                        <leftbtn v-bind:button_val="'关'"></leftbtn>
                    </el-tooltip>
                </li>

            </ul>
        </div>
        <div v-show="show_side_flag" :style="show_side" class="top">
            <div>
                <div v-show="username === null" class="user" @click="this.go_login">
                    <span>登录</span>
                </div>

                <el-popover
                        placement="bottom"
                        width="200"
                        trigger="click"
                        class="popover"
                        v-model="showpop"
                        popper-class="tag-popover"
                        content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
                    <div class="user-lst">
                        <div class="user-lst-element" @click="this.go_user" v-show="username !== '正在登录中...'">我的空间</div>
                        <div class="user-lst-element" v-show="username !== '正在登录中...'">我的存档</div>
                        <div class="user-lst-element" @click="this.go_login">退出登录</div>
                    </div>
                    <fold_title slot="reference" :icon="'empty'" :title_value="username" v-show="username !== null">
                    </fold_title>
                </el-popover>


            </div>
        </div>
        <div v-show="show_side_flag" :style="show_side" class="clear"></div>
        <div v-show="show_side_flag" :style="show_side" class="news">
            <div v-if="token === null">
                <p>💙 感谢你使用本系统</p>
                <p>🧐 您可以如下操作 </p>
                <br><br><br>
                <p>登录之后，你可以利用我们给你的系统自己写剧本物品等游戏元素，创建到一个项目中，网站可以根据你的信息生成一个肉鸽游戏，你可以进行发布等操作</p>
                <br>
                <p>当然你也可以对别人发布的游戏进行游玩 前提是你需要登录我们的网站</p>
            </div>

            <div v-if="token !== null">
                <div class="fastview">

                    <div v-show="this.$store.state.collection.fastview.length >= 0">
                        <el-tooltip class="item" effect="dark" content="不能存放有子折叠的按钮" placement="right">
                            <div class="drop-zone" @drop="drop(event)" @dragover="allowDrop(event)">
                                <flod :title_value="'加入快捷盒子'"
                                      @dragover.native="dragOver" @drop.native="drop"
                                      :icon="'➕'"
                                      ref="fastview"
                                >

                                    <div slot="body">
                                        <div v-for="i in this.element_fastview">
                                            <div v-html="i.outerHTML"></div>
                                        </div>
                                    </div>
                                </flod>
                            </div>
                        </el-tooltip>


                    </div>

                    <br>

                </div>
                <hr>
                <flod :title_value="'我的项目'">

                </flod>
                <flod :title_value="'我的资源'">
                    <div slot="body" class="options">
                        <flod :title_value="'角色管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title
                                        :title_value="'更多'"
                                        :id="'more'"
                                        :group="'more'"
                                        :icon="'▪▪▪'"

                                ></fold_title>
                                <fold_title
                                        :id="'add_charts'"
                                        :group="'add_charts'"
                                        :title_value="'添加角色'"
                                        :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'关卡管理'" :icon="'📦'">
                            <div slot="body">
                                <fold_title
                                        :title_value="'更多'"
                                        :icon="'▪▪▪'"
                                        :id="'customs_more'"
                                        :group="'customs_more'"
                                ></fold_title>
                                <fold_title :title_value="'添加关卡'"
                                            :id="'customs_add'"
                                            :group="'customs_add'"
                                            :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'事件管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :title_value="'更多'" :icon="'▪▪▪'"
                                            :id="'event_more'"
                                            :group="'event_more'"></fold_title>

                                <fold_title :title_value="'添加事件'"
                                            :id="'event_add'"
                                            :group="'event_add'"
                                            :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'技能管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'skills_more'"
                                            :group="'skills_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_skills'"
                                            :group="'add_skills'"
                                            :title_value="'添加技能'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'触发器管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'tigger_more'"
                                            :group="'tigger_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_tigger'"
                                            :group="'add_tigger'"
                                            :title_value="'添加触发'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'合成管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'tigger_more'"
                                            :group="'tigger_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_tigger'"
                                            :group="'add_tigger'"
                                            :title_value="'添加触发'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'商店管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'tigger_more'"
                                            :group="'tigger_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_tigger'"
                                            :group="'add_tigger'"
                                            :title_value="'添加触发'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'Buff管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'tigger_more'"
                                            :group="'tigger_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_tigger'"
                                            :group="'add_tigger'"
                                            :title_value="'添加触发'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'剧本管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'script_more'"
                                            :group="'script_more'"
                                            :title_value="'更多'" :icon="'▪▪▪'"></fold_title>

                                <fold_title :id="'add_script'"
                                            :group="'add_script'"
                                            :title_value="'添加触发'" :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                        <flod :title_value="'高级代码管理'" :icon="'👦'">
                            <div slot="body">
                                <fold_title :id="'tigger_more'"
                                            :group="'tigger_more'"
                                            :title_value="'函数库'" :icon="'▪▪▪'"></fold_title>

                            </div>
                        </flod>
                    </div>

                </flod>

                <flod :title_value="'协作开发'">
                    <div slot="body" class="options">
                        <flod :title_value="'我的任务'" :icon="'👦'">
                            <div slot="body">
                                <fold_title
                                        :title_value="'委派任务'"
                                        :id="'send_task'"
                                        :group="'send_task'"
                                        :icon="'▪▪▪'"
                                ></fold_title>
                                <fold_title
                                        :id="'finish_task'"
                                        :group="'finish_task'"
                                        :title_value="'任务完成'"
                                        :icon="'➕'"></fold_title>
                            </div>

                        </flod>

                        <flod :title_value="'我的团队'" :icon="'👦'">
                            <div slot="body">
                                <fold_title
                                        :title_value="'加入团队'"
                                        :id="'join_other'"
                                        :group="'join_other'"
                                        :icon="'▪▪▪'"
                                ></fold_title>
                                <fold_title
                                        :id="'needMy'"
                                        :group="'needMy'"
                                        :title_value="'团队邀请'"
                                        :icon="'➕'"></fold_title>
                            </div>
                        </flod>
                    </div>
                </flod>
            </div>
        </div>

        <router-view
                class="view"
                :style="left_set"
        />

    </div>


</template>

<script>
    import leftbtn from "./components/left-button.vue"
    import flod from "./components/molecule/fold.vue"
    import fold_title from "./components/atom/flod_title.vue"
    import funcs from "@/assets/overflow_y.js"

    export default {
        mounted() {
            funcs.funcs.hidden();
            let token = localStorage.getItem("token")
            if (token !== null) {
                this.getStatus(token)
                this.username = localStorage.getItem("username")
            } else {
            }
            if (this.falg_load === false) {
                this.falg_load = true;
                let id_list = this.$store.state.collection.fastview;
                if (id_list.length > 0) {
                    // element_fastview的组件加载
                    for (let i of id_list) {
                        let element = document.getElementById(i)
                        if (element == null) {
                            continue
                        } else {
                            this.element_fastview.push(element)
                        }
                    }
                }
            }
            this.shown_side()

        },
        data() {
            return {
                left_set: {},
                show_side: true,
                HomeBtnValue: "主",
                GameBtnValue: "厅",
                PrivateBtnValue: "造",
                CommunityBtnValue: "社",
                token: localStorage.getItem("token"),
                username: localStorage.getItem("username"),
                showpop: false,
                element_fastview: [], // 这是存放控件的地方 默认从序列化好的vuex中加载
                falg_load: false,
                show_side_flag: true
            }
        },
        methods: {
            /**
             * 展示和关闭side 一般是路由使用的
             */
            ctrl_side() {
                if (this.show_side_flag) {
                    this.hiden_side()
                } else {
                    console.log("伸")
                    this.shown_side()
                }
            },
            hiden_side() {
                this.show_side = {
                    width: "0px"
                }
                this.left_set = {
                    left: "0px"
                }
                this.show_side_flag = false
            },
            shown_side() {
                this.show_side = {}
                this.left_set = {
                    left: "-200px",
                    width: "calc(200px + 100vw)"
                }
                this.show_side_flag = true

            },

            /**
             * 利用 token 获取当前的登录状态
             * @param token
             */
            getStatus(token) {
                this.$axios.post(
                    "/vtoken",
                    {token}
                ).then(
                    (response) => {
                        let responsed = response.data
                        if (!responsed.data) {
                            this.$notify.warning({
                                title: "登录信息失效",
                                message: "请重新登录"
                            })
                            setTimeout(
                                () => {
                                    localStorage.removeItem("username");
                                    localStorage.removeItem("userdata");
                                    localStorage.removeItem("token");
                                    window.location.reload()
                                }, 500
                            )
                        } else {
                            this.$notify.info({
                                title: "欢迎回来",
                                message: "你好," + this.username + "!"
                            })
                        }

                    }
                )
            },
            /**
             * 拖动 组件
             * @param event
             */
            dragOver(event) {
                // 防止浏览器默认行为
                event.preventDefault();
            },
            drop(event) {
                // 获取拖动数据
                if (event === undefined) return
                const data = event.dataTransfer.getData("text/plain");

                if (this.$store.state.collection.fastview.indexOf(data) < 0) {
                    let element = document.getElementById(data)
                    if (element === null) {
                        return
                    }
                    this.element_fastview.push(element)
                    this.save_fastview()

                }
            },
            allowDrop(event) {
                if (event === undefined) return
                event.preventDefault();
            },
            drag(event) {
                if (event === undefined) return

                event.dataTransfer.setData("text", event.target.id);
            },
            /**
             * 更新用户的信息
             * @param userinfo
             */
            update_userinfo(userinfo) {
                this.username = userinfo.username;
                this.token = userinfo.token;
            },
            /**
             * 保存快捷盒子的信息
             */
            save_fastview() {
                let element = this.$refs.fastview.$el; // 找到指定的 父容器
                for (let i of element.children) {
                    setTimeout(
                        () => {
                            const parser = new DOMParser();
                            const doc = parser.parseFromString(i.outerHTML, 'text/html');
                            const elementWithId = doc.getElementsByClassName('app');
                            let fastview_id = []
                            for (let j of elementWithId) {
                                fastview_id.push(j.id)
                            }
                            this.$store.commit("collection/sfastview", fastview_id)
                        }, 100
                    )
                }
            },
            /**
             * 进入登录页面
             */
            go_login() {
                this.username = "正在登录中...";
                this.token = null;
                this.$router.push("/login");
                this.showpop = false;
            },
            go_user() {
                this.$router.push("/user");
                this.showpop = false;

            }
        },
        components: {
            leftbtn,
            flod,
            fold_title
        }
    }
</script>

<style lang="less" scoped>
    @top-height: 50px;
    @left-width: 80px;
    @background: #3F0E40;
    @top-width: 200px;
    .left, .top, .clear, .news {
        /*transition: 1s;*/
        overflow: hidden;
    }

    .el-popover[x-placement^='bottom'] {
        margin-top: -8px;
        background-color: steelblue !important;
    }

    .user-lst {
        text-align: center;
        user-select: none;
        cursor: pointer;

        .user-lst-element {
            padding: 5px 0px;
            margin-bottom: 2px;
            transition: 1s;
        }

        .user-lst-element:hover {
            background-color: rgba(60, 11, 64, 0.65);
            color: white;
        }
    }

    .left {
        position: sticky;

        z-index: 999 !important;
    }

    .view {
        position: relative;
        /*z-index: -10;*/
        left: -200px;
        height: 100vh;
        /*width: calc(200px + 100vw);*/
    }

    .box {
        background-color: @background;
        color: white;
        z-index: 999;
        box-sizing: border-box;
        border-right: honeydew 1px solid;
        border-left: none;
    }


    .left {
        width: @left-width;
        height: 100vh;
        .box;
        float: left;

        .left-ul {
            li {
                margin-top: 30px;
            }
        }
    }

    .top {
        width: @top-width;
        float: left;
        position: sticky;
        height: @top-height;
        z-index: 999;

        border-bottom: gray 1px solid;
        .box;
        display: flex;
        justify-content: center;
        align-items: center;

        .user {
            user-select: none;
            width: 120%;
            box-sizing: border-box;
            padding: 6px 0px;
            padding-left: 10px;
            /*text-align: center;*/

            &:hover {
                transition: .3s;
                border-radius: 10px;
                background-color: #4D2A51;
            }
        }
    }

    .news {
        padding: 20px;
        float: left;
        position: relative;
        z-index: 999;
        top: @top-height;
        left: -@top-width;
        .box;
        width: @top-width;
        height: calc(100vh - @top-height);
        text-align: center;
    }


</style>